<template>
	<view>
		<view :class="'navbar'">
			<view class="navbarH" :style="{height: navH + 'rpx'}">
				<view class="navbarCon acea-row row-center-wrapper">
					<view class="name line1" :class="isScrollTop>0.5?'on':''">{{title}}</view>
					<view class="iconfont icon-xiangzuo" v-if="returnShow" @tap="returnFun"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				returnShow: true, //是否展示返回按钮
				navH: '',
				navbarRight: 0,
				homeTop: 20
			};
		},
		mounted() {
			let that = this;
			var pages = getCurrentPages();
			// 判断有没有上个页面
			if (pages.length >= 2) {
				// 显示返回按钮
				this.returnShow = true
			}
			// that.returnShow = pages.length === 1 ? false : true;
			// #ifdef MP
			that.navH = getApp().globalData.navHeight;
			this.$nextTick(function() {
				// #ifdef MP
				const menuButton = uni.getMenuButtonBoundingClientRect();
				const query = uni.createSelectorQuery().in(this);
				query
					.select('#home')
					.boundingClientRect(data => {
						this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
					})
					.exec();
				// #endif
			});
			// #endif
			// #ifndef MP
			that.navH = 96;
			// #endif
			uni.getSystemInfo({
				success: function(res) {
					// that.height = res.windowHeight;
					//res.windowHeight:获取整个窗口高度为px，*2为rpx；98为头部占据的高度；
					// #ifndef APP-PLUS || H5 || MP-ALIPAY
					that.navbarRight = res.windowWidth - uni.getMenuButtonBoundingClientRect().left;
					// #endif
				}
			});
		},
		methods: {
			// 后退
			returns() {
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss">
	.navbar .navbarH {
		position: fixed;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		background: linear-gradient(90deg, rgba(238, 33, 45, 1) 0%, rgba(238, 33, 45, 1) 100%);
	}

	.navbar .navbarH .navbarCon {
		position: absolute;
		bottom: 0;
		height: 100rpx;
		width: 100%;
	}

	.navbar .navbarH .navbarCon .name {
		color: #ffffff;
		font-size: 34rpx;
		width: 300rpx;
		text-align: center;
	}

	.navbar .navbarH .navbarCon .name.on {
		color: #000;
	}

	.navbar .navbarH .navbarCon .icon-xiangzuo {
		color: #ffffff;
		position: absolute;
		font-size: 40rpx;
		left: 16rpx;
		width: 100rpx;
		height: 56rpx;
		line-height: 54rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.navbar .navbarH .navbarCon .icon-xiangzuo.on {
		color: #000;
	}
</style>
